<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">

    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Shop || Selphy</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- favicon
    ============================================ -->


    <!-- Google Fonts
    ============================================ -->
    <link href='../../../../css-OpenSans20030040050060070080.css' rel='stylesheet' type='text/css'>
    <!-- Bootstrap CSS
    ============================================ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Font Awesome CSS
    ============================================ -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- Mean Menu CSS
    ============================================ -->
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <!-- owl.carousel CSS
    ============================================ -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <!-- nivo-slider css
    ============================================ -->
    <link rel="stylesheet" href="css/nivo-slider.css">
    <!-- Price slider css
    ============================================ -->
    <link rel="stylesheet" href="css/jquery-ui-slider.css">
    <!-- Simple Lence css
    ============================================ -->
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleLens.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.simpleGallery.css">
    <!-- normalize CSS
    ============================================ -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- main CSS
    ============================================ -->
    <link rel="stylesheet" href="css/main.css">
    <!-- style CSS
    ============================================ -->
    <link rel="stylesheet" href="style.css">
    <!-- responsive CSS
    ============================================ -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- modernizr JS
    ============================================ -->
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<div id="item_box">
    <!-- Header Area -->
    <div id="header11"></div>
    <!-- Breadcurb Area -->
    <div class="breadcurb-area">
        <div class="container">
            <ul class="breadcrumb">
                <li class="home"><a href="index.html">首页</a></li>
                <li>商场</li>
            </ul>
        </div>
    </div><!-- End Breadcurb Area -->
    <!-- Shop Product Area -->
    <div class="shop-product-area">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-12">
                    <!-- Left Sidebar-->
                    <div class="left-sidebar">
                        <div class="left-sidebar-title">
                            <h2></h2>
                        </div>
                        <!-- Shop Layout -->
                        <div class="shop-layout">
                            <div class="layout-title">
                                <h2>商品种类</h2>
                            </div>
                            <div class="layout-list">
                                <ul>
                                    <li><span @click="classifyFind(1,1)"><img src="img/icon/m1.png" alt="icon">笔记本电脑</span>
                                    </li>
                                    <li><span @click="classifyFind(2,1)"><img src="img/icon/m2.png" alt="icon">智能手机</span>
                                    </li>
                                    <li><span @click="classifyFind(3,1)"><img src="img/icon/m5.png" alt="icon">数码相机</span>
                                    </li>
                                    <li><span @click="classifyFind(4,1)"><img src="img/icon/m6.png" alt="icon">其他</span>
                                    </li>
                                </ul>
                            </div>
                        </div><!-- End Shop Layout Area -->
                        <!-- Price Filter -->
                        <div class="price-filter-area shop-layout">
                            <div class="price-filter">
                                <div class="layout-title">
                                    <h2>价格区间</h2>
                                </div>
                                <div id="slider-range"></div>
                                <p>
                                    <input type="text" id="amount" readonly=""
                                           style="border:0; color:#f6931f; font-weight:bold;"/>
                                </p>
                                <button class="btn btn-default" @click="">查找</button>
                            </div>
                        </div><!-- End Price Filter Area -->


                    </div><!-- End Left Sidebar -->
                </div>
                <div class="col-md-9 col-sm-12">
                    <!-- Shop Product View -->
                    <div class="shop-product-view">
                        <!-- Shop Product Tab Area -->
                        <div class="product-tab-area">
                            <!-- Tab Content -->
                            <div class="tab-content">
                                <!-- Shop Product-->
                                <div class="tab-pane active" id="shop-product">
                                    <!-- Tab Single Product-->
                                    <div class="tab-single-product">
                                        <!-- Single Product -->
                                        <template v-for="item in items">
                                            <div class="singel-product single-product-col">
                                                <div class="label-pro-new">New</div>
                                                <!-- Single Product Image -->
                                                <div class="single-product-img">
                                                    <a @click="changeUrl(item.gid)"><img :src="item.url" alt="product"></a>
                                                </div>
                                                <!-- Single Product Content -->
                                                <div class="single-product-content">
                                                    <h2 class="product-name"><a title="Proin lectus ipsum"
                                                                                @click="changeUrl(item.gid)">{{item.gname}}</a>
                                                    </h2>
                                                    <div class="ratings">
                                                        <div class="rating-box">
                                                            <span>开始时间：{{item.start}}</span>
                                                        </div>
                                                    </div>
                                                    <div class="product-price">
                                                        <p>￥{{item.price}}</p>
                                                    </div>
                                                    <!-- Single Product Actions -->
                                                    <div class="product-actions">
                                                        <button class="button btn-cart" title="Add to Cart"
                                                                type="button"><i
                                                                class="fa fa-shopping-cart">&nbsp;</i><span @click="addEnshrine(item.gid)">加入收藏</span>
                                                        </button>
                                                    </div><!-- End Single Product Actions -->
                                                </div><!-- End Single Product Content -->
                                            </div><!-- End Single Product -->
                                        </template>
                                    </div>
                                </div><!-- End Shop List -->
                            </div><!-- End Tab Content -->
                            <!-- Tab Bar -->
                            <div class="tab-bar tab-bar-bottom">
                                <div class="toolbar">
                                    <div class="sorter">
                                        <div class="sort-by">
                                            <label>Sort By</label>
                                            <select>
                                                <option value="position">Position</option>
                                                <option value="name">Name</option>
                                                <option value="price">Price</option>
                                            </select>
                                            <a href=""><i class="fa fa-long-arrow-up"></i></a>
                                        </div>
                                    </div>
                                    <div class="pages">
                                        <strong>页码:</strong>
                                        <ol>
                                            <li class="current">
                                                <span style="">{{this.pageNum}}</span>
                                            </li>
                                            <li><a @click="nextPage()">
                                                {{this.pageNum+1}}
                                            </a></li>
                                            <li><a title="Next" href=""><i class="fa fa-arrow-right"></i></a></li>
                                        </ol>
                                    </div>
                                </div>
                            </div><!-- End Tab Bar -->
                        </div><!-- End Shop Product Tab Area -->
                    </div><!-- End Shop Product View -->
                </div>
            </div>
        </div>
    </div><!-- End Shop Product Area -->
    <!-- Brand Area -->

</div>

<div id="footer11"></div>
<!-- jquery
============================================ -->
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<!-- bootstrap JS
============================================ -->
<script src="js/bootstrap.min.js"></script>
<!-- nivo slider js
============================================ -->
<script src="js/jquery.nivo.slider.pack.js"></script>
<!-- Mean Menu js
============================================ -->
<script src="js/jquery.meanmenu.min.js"></script>
<!-- price-slider JS
============================================ -->
<script src="js/jquery-price-slider.js"></script>
<!-- Simple Lence JS
============================================ -->
<script type="text/javascript" src="js/jquery.simpleGallery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpleLens.min.js"></script>
<!-- owl.carousel JS
============================================ -->
<script src="js/owl.carousel.min.js"></script>
<!-- scrollUp JS
============================================ -->
<script src="js/jquery.scrollUp.min.js"></script>
<!-- DB Click JS
============================================ -->
<script src="js/dbclick.min.js"></script>
<!-- Countdown JS
============================================ -->
<script src="js/jquery.countdown.min.js"></script>
<!-- plugins JS
============================================ -->
<script src="js/plugins.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<!-- main JS
============================================ -->
<script src="js/main.js"></script>
<script>
    $(function () {
        $('#header11').load("auction-head.html");
        $('#footer11').load('auction-footer.html');
    })
    var vm = new Vue({
        el: '#item_box',
        data() {
            return {
                items: null, id: 100,
                countyid: 0,
                cid: 0,
                sortType: "enshrine",
                sort: 1,
                name: "fuck",
                pageNum: 1,
                pageSize: 8,
            }
        },
        methods:{
            changeUrl: function(gid){
                window.location.href = "product-details.html?gid=" + gid;
            },
            classifyFind:function(cid,pageNum) {
                var temp=this;
                axios
                    .get("/web-goods/show/selectShowGoodsList/" + this.countyid + "/" + cid + "/" + this.sortType + "/" + this.sort + "/" + this.name + "/" + pageNum + "/" + this.pageSize + "/")
                    .then(response => (this.items = response.data.data))
                    .catch(function (error) { // 请求失败处理
                        alert(error);
                        console.log(error);
                });
            },
            classifyAndName:function(cid,name,pageNum) {
                var temp=this;
                axios
                    .get("/web-goods/show/selectShowGoodsList/" + this.countyid + "/" + cid + "/" + this.sortType + "/" + this.sort + "/" + name + "/" + pageNum + "/" + this.pageSize + "/")
                    .then(response => (this.items = response.data.data))
                    .catch(function (error) { // 请求失败处理
                        alert(error);
                        console.log(error);
                    });
            },
            noEnshrine:function (gid) {
                var temp=this;
                axios.post('/web-goods/buyer/noEnshrine/'+gid+"/")
                    .then(alert("取消成功"))
                    .catch(function (error) { // 请求失败处理
                        alert(error);
                        console.log(error);
                    });
            },
            addEnshrine:function (gid) {
                var temp=this;
                axios.post('/web-goods/buyer/enshrine/'+gid+"/")
                    .then(alert("收藏成功"))
                    .catch(function (error) { // 请求失败处理
                        alert(error);
                        console.log(error);
                    });
            },
            nextPage:function () {
                var temp=this;
                this.pageNum=this.pageNum+1,
                alert(this.pageNum);
                axios
                    .get("/web-goods/show/selectShowGoodsList/" + this.countyid + "/" + this.cid + "/" + this.sortType + "/" + this.sort + "/" + this.name + "/" + this.pageNum + "/" + this.pageSize + "/")
                    .then(
                        response => (this.items = response.data.data))
                    .catch(function (error) { // 请求失败处理
                        alert(error);
                        console.log(error);
                    });
            },
            init:function () {
                var temp=this;
                axios
                    .get("/web-goods/show/selectShowGoodsList/" + this.countyid + "/" + this.cid + "/" + this.sortType + "/" + this.sort + "/" + this.name + "/" + this.pageNum + "/" + this.pageSize +"/")
                    .then(response => (this.items = response.data.data))
                    .catch(function (error) { // 请求失败处理
                        alert(error);
                        console.log(error);
                    });
            }
        },
        // @GetMapping("/selectShowGoodsList/{countyid}/{cid}/{sortType}/{sort}/{name}/{pageNum}/pageSize/")
        mounted() {
            var url = document.location.toString();//获取当前URL
            if (url.indexOf("?") != -1) {  //判断URL？后面不为空
                var arrUrl = url.split("?");//分割？
                var param = arrUrl[1];//获取参数部分
                if (url.indexOf("&") != -1){
                    var paramlist=param.split("&");
                    this.classifyAndName(paramlist[0],paramlist[1],1);
                }else {
                    this.classifyFind(param,1)
                }
            }else{
                alert(4)
                this.init()
            }
            alert(5)
        }

    })
</script>
</body>
</html>
